<script lang="ts" setup>
import { defineEmits, defineProps, onMounted, ref } from 'vue';

withDefaults(
  defineProps<{
    open?: Boolean;
    userId: string;
  }>(),
  {
    open: false, // 默认值
  },
);
const emit = defineEmits(['close']);
const loading = ref<boolean>(false);

const dataSource = ref([
  {
    id: 1,
    userId: '123456',
    fieldName: 'extend_field1',
    showLabel: '自定义字段',
    width: '120',
    align: '0',
    sort: '12',
    disable: '1',
  },
]);
const columns = ref([
  {
    title: '字段编码',
    dataIndex: 'fieldName',
    key: 'fieldName',
    width: 140,
    align: 'center',
  },
  {
    title: '显示名称',
    dataIndex: 'showLabel',
    key: 'showLabel',
    width: 140,
    align: 'center',
  },
  {
    title: '字段宽度',
    dataIndex: 'width',
    key: 'width',
    width: 100,
    align: 'center',
  },
  {
    title: '字段排序',
    dataIndex: 'sort',
    key: 'sort',
    width: 100,
    align: 'center',
  },
  {
    title: '是否居中',
    dataIndex: 'align',
    key: 'align',
    width: 100,
    align: 'center',
  },
  {
    title: '启用禁用',
    dataIndex: 'disable',
    key: 'disable',
    width: 100,
    align: 'center',
  },
]);

const onClose = () => {
  emit('close');
};

onMounted(() => {
  list();
});

const list = async () => {};
</script>
<template>
  <a-modal
    :visible="open"
    title="字段配置"
    width="68%"
    @ok="onClose"
    @cancel="onClose"
  >
    <a-table :columns="columns" :data-source="dataSource">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column?.key === 'align'">
          <a-switch
            :checked="record.align === '1'"
            @change="(checked) => (record.align = checked ? '1' : '0')"
            checked-children="是"
            un-checked-children="否"
          />
        </template>
        <template v-if="column?.key === 'disable'">
          <a-switch
            :checked="record.disable === '1'"
            @change="(checked) => (record.disable = checked ? '1' : '0')"
            checked-children="启用"
            un-checked-children="禁用"
          />
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<style scoped></style>
